<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left">
				<view class="global-header-left" @click="goBack">
					<view class="global-back-button">
						<text class="global-back-icon">‹</text>
					</view>
					<text class="global-back-text">返回</text>
				</view>
			</view>
			<view class="header-center">
				<text class="header-title">周边领取网点指引</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y="true" enable-back-to-top="true">
			<!-- 促销文本块 -->
			<view class="promotion-text">
				<view class="promotion-content">
					<text>
						<text class="highlight">凡在2025年11月17日至11月30日期间</text>,前往以下<text class="highlight">江苏省内指定体彩门店</text>,关注江苏体彩微信订阅号,参与捐步即有机会免费领取<text class="highlight">第十一季体彩爱行走主题冰箱贴，共有红绿黄三色</text>。每个用户仅可领取1个,限量发行,先到先得。
					</text>
					
				</view>
				<view class="promotion-content promotion-note">
					<image class="fridge-magnet-icon" src="/static/ref-red.png" mode="aspectFit"></image>
					<image class="fridge-magnet-icon" src="/static/ref-green.png" mode="aspectFit"></image>
					<image class="fridge-magnet-icon" src="/static/ref-yellow.png" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 表格容器 -->
			<view class="table-wrapper">
				<!-- 按城市分组显示 -->
				<view 
					class="city-group" 
					v-for="(cityGroup, cityIndex) in groupedStores" 
					:key="cityIndex"
				>
					<!-- 城市标题 -->
					<view class="city-title">{{ cityGroup.city }}</view>
					
					<!-- 表头 -->
					<view class="table-header">
						<view class="header-cell header-cell-number">网点编号</view>
						<view class="header-cell header-cell-address">网点地址</view>
						<view class="header-cell header-cell-color">可领冰箱贴颜色</view>
					</view>

					<!-- 表格数据行 -->
					<view 
						class="table-row" 
						v-for="(item, index) in cityGroup.stores" 
						:key="index"
					>
						<view class="table-cell cell-number">{{ item.number }}</view>
						<view class="table-cell cell-address">{{ item.address }}</view>
						<view 
							class="table-cell cell-color"
							:class="getColorClass(item.color)"
						>
							{{ item.color }}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 门店列表数据（根据图片中的数据，按城市分组，每个城市包含红色、绿色、黄色）
			storeList: [
				// 南京
				{ number: '3201288182', address: '南京市中山门大街699号招商花园城加铺-2F', color: '红色', city: '南京' },
				{ number: '3201289207', address: '南京市地铁1号线新街口站C29号商铺', color: '绿色', city: '南京' },
				{ number: '3201289768', address: '南京市中和路68号金陵天地4楼体育彩票', color: '黄色', city: '南京' },
				// 苏州
				{ number: '3205055258', address: '苏州市姑苏区观前街宫巷75号', color: '红色', city: '苏州' },
				{ number: '3205055204', address: '苏州市工业园区奥体商业中心负一楼', color: '绿色', city: '苏州' },
				{ number: '3205005302', address: '苏州市高新区竹园路9-2号上贤雅苑社区用房一楼大厅南侧', color: '黄色', city: '苏州' },
				// 无锡
				{ number: '3202022779', address: '江阴市澄江街道绮山路223号', color: '红色', city: '无锡' },
				{ number: '3202002669', address: '宜兴市宜城街道人民南路226号球迷俱乐部', color: '绿色', city: '无锡' },
				{ number: '3202022180', address: '无锡市滨湖区大通路尊鹏云著3-1号店铺', color: '黄色', city: '无锡' },
				// 南通
				{ number: '3206056372', address: '南通市崇川区环城东路13号附6号', color: '红色', city: '南通' },
				{ number: '3206056659', address: '启东市长龙街633-635号门面', color: '绿色', city: '南通' },
				{ number: '3206056399', address: '南通市崇川区尚海湾尚文路附4幢109室', color: '黄色', city: '南通' },
				// 徐州
				{ number: '3203289133', address: '徐州市贾汪区中旺路1号吾悦广场1F', color: '红色', city: '徐州' },
				{ number: '3203289388', address: '徐州市鼓楼区复兴北路27号宝龙广场1F中国体育彩票', color: '绿色', city: '徐州' },
				{ number: '3203288640', address: '徐州市云龙区和平大道58号', color: '黄色', city: '徐州' },
				// 连云港
				{ number: '3207007121', address: '连云港市海州区中大街81号', color: '红色', city: '连云港' },
				{ number: '3207007327', address: '连云港市海州区香溢世纪花城南门7号门面中国体育彩票', color: '绿色', city: '连云港' },
				{ number: '3207007302', address: '连云港市连云区院前路3号', color: '黄色', city: '连云港' },
				// 常州
				{ number: '3204024474', address: '常州市钟楼区吾悦广场负一层展示体验中心(名创优品旁)', color: '红色', city: '常州' },
				{ number: '3204054446', address: '常州市奥林匹克体育中心E37口体彩网点', color: '绿色', city: '常州' },
				{ number: '3204004012', address: '常州市常州文化广场体彩网点(近幸福蓝海九龙国际影城)', color: '黄色', city: '常州' },
				// 淮安
				{ number: '3208028301', address: '淮安市开发区珠海路105号1幢106珠海小区旁', color: '红色', city: '淮安' },
				{ number: '3208028103', address: '淮安市清江浦区开元路淮海第一城南屏苑商铺25室', color: '绿色', city: '淮安' },
				{ number: '3208028203', address: '淮安市清江浦北京路众城名府12-6号', color: '黄色', city: '淮安' },
				// 盐城
				{ number: '3209059082', address: '盐城市亭湖区民航新村锦康苑102门市', color: '红色', city: '盐城' },
				{ number: '3209059786', address: '盐城市中南城魔力月光10151门市', color: '绿色', city: '盐城' },
				{ number: '3209029080', address: '盐城市经济开发区阳光世纪园西大门中国体育彩', color: '黄色', city: '盐城' },
				// 扬州
				{ number: '3210030071', address: '扬州市邗江区文昌中路606号万象汇B108', color: '红色', city: '扬州' },
				{ number: '3210289131', address: '扬州市邗江区扬子津北路101号印象汇1F', color: '绿色', city: '扬州' },
				{ number: '3210288377', address: '扬州市邗江区邗江中路302号万达广场4L', color: '黄色', city: '扬州' },
				// 镇江
				{ number: '3211061053', address: '镇江市京口区纬四路16号吾悦广场4楼', color: '红色', city: '镇江' },
				{ number: '3211061037', address: '镇江市中山东路301号苏宁广场B1楼', color: '绿色', city: '镇江' },
				{ number: '3211288979', address: '镇江市黄山西路19号万达广场3楼', color: '黄色', city: '镇江' },
				// 泰州
				{ number: '3212062120', address: '泰州市海陵区迎宾路188-41号', color: '红色', city: '泰州' },
				{ number: '3212032030', address: '泰州市高港区西榭路华泽天下花园22栋103室', color: '绿色', city: '泰州' },
				{ number: '3212032037', address: '泰州市海陵区青年路88号', color: '黄色', city: '泰州' },
				// 宿迁
				{ number: '3213271593', address: '宿迁市宿城区宝龙广场一楼', color: '红色', city: '宿迁' },
				{ number: '3213272133', address: '宿迁市宿城区吾悦广场1F2号门', color: '绿色', city: '宿迁' },
				{ number: '3213288646', address: '宿迁市宿豫区项王东路8号万达广场1楼', color: '黄色', city: '宿迁' }
			]
		}
	},
	computed: {
		// 按城市分组
		groupedStores() {
			const groups = {}
			this.storeList.forEach(store => {
				if (!groups[store.city]) {
					groups[store.city] = {
						city: store.city,
						stores: []
					}
				}
				groups[store.city].stores.push(store)
			})
			return Object.values(groups)
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		getColorClass(color) {
			if (color === '红色') {
				return 'color-red'
			} else if (color === '黄色') {
				return 'color-yellow'
			} else if (color === '绿色') {
				return 'color-green'
			}
			return ''
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background-color: #93D3F4;
	display: flex;
	flex-direction: column;
	padding: 0;
	--header-height: 184rpx; /* 头部高度 */
	--content-margin-top: 20rpx; /* content 的 margin-top */
}

/* 顶部导航栏 */
.header {
	background: transparent;
	padding: var(--status-bar-height, 44rpx) 30rpx 20rpx;
	padding-top: 104rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1000;
	height: 184rpx; /* 104rpx (padding-top) + 60rpx (按钮高度) + 20rpx (padding-bottom) */
	box-sizing: border-box;
}

.header-left {
	flex: 1;
}

.header-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #003366;
}

.header-right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20rpx;
}

.header-icon {
	font-size: 40rpx;
	color: #FFFFFF;
	line-height: 1;
}

/* 全局返回按钮样式 */
.global-back-button {
	width: 60rpx;
	height: 60rpx;
	background: #FF0000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15rpx;
}

.global-back-icon {
	color: white;
	font-size: 40rpx;
	font-weight: bold;
	line-height: 1;
}

.global-back-text {
	color: #FFFFFF;
	font-size: 28rpx;
}

.global-header-left {
	display: flex;
	align-items: center;
}

/* 内容区域 */
.content {
	height: calc(100vh - var(--header-height) - var(--content-margin-top)); /* 100vh - 头部高度 - margin-top */
	padding: 0;
	margin-top: var(--content-margin-top);
	box-sizing: border-box;
	background: #fff;
	border-top-left-radius: 60rpx;
	border-top-right-radius: 60rpx;
	overflow: hidden; /* 确保内容不会溢出 */
}

/* 促销文本块 */
.promotion-text {
	padding: 20rpx 20rpx 15rpx;
	background: #fff;
}

.promotion-content {
	font-size: 24rpx;
	color: #333333;
	line-height: 1.6;
	text-align: left;
	display: inline-block;
	width: 100%;
}

.highlight {
	/* background-color: #FFE4E1;
	padding: 2rpx 4rpx;
	border-radius: 4rpx; */
}

.fridge-magnet-icon {
	width: 100rpx;
	height: 100rpx;
	vertical-align: middle;
	display: inline-block;
	margin: 0;
}

.promotion-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rpx;
	margin-top: 10rpx;
}

.table-wrapper {
	width: 100%;
	padding: 0 0 20rpx;
}

/* 城市分组 */
.city-group {
	margin-bottom: 20rpx;
	width: 100%;
}

.city-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #000000;
	padding: 15rpx 20rpx 8rpx;
	position: relative;
	margin-bottom: 0;
}

.city-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20rpx;
	right: 20rpx;
	height: 2rpx;
	/* background: #FFE4E1; */
}

.city-title::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1rpx;
	background: #E0E0E0;
}

/* 表头 */
.table-header {
	display: flex;
	background: #F8F8F8;
	border-bottom: 1rpx solid #E0E0E0;
	width: 100%;
}

.header-cell {
	padding: 12rpx 10rpx;
	font-size: 24rpx;
	font-weight: bold;
	color: #000000;
	text-align: center;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.header-cell::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2rpx;
	/* background: #FFE4E1; */
}

.header-cell-number {
	flex: 0 0 240rpx;
}

.header-cell-address {
	flex: 1;
	min-width: 0;
}

.header-cell-color {
	flex: 0 0 240rpx;
}

/* 表格数据行 */
.table-row {
	display: flex;
	background: #FFFFFF;
	border-bottom: 1rpx solid #F0F0F0;
	min-height: 60rpx;
	width: 100%;
}

.table-row:nth-child(odd) {
	background: #FFFFFF;
}

.table-row:nth-child(even) {
	background: #F5F5F5;
}

.table-cell {
	padding: 12rpx 10rpx;
	font-size: 22rpx;
	color: #000000;
	display: flex;
	align-items: center;
	word-break: break-all;
	line-height: 1.3;
	box-sizing: border-box;
}

.cell-number {
	flex: 0 0 240rpx;
	justify-content: center;
	text-align: center;
}

.cell-address {
	flex: 1;
	min-width: 0;
	justify-content: flex-start;
	text-align: left;
}

.cell-color {
	flex: 0 0 240rpx;
	justify-content: center;
	font-weight: 500;
	text-align: center;
}

/* 颜色文字 */
.color-red {
	color: #FF0000;
}

.color-yellow {
	color: #FFD700;
}

.color-green {
	color: #4CAF50;
}
</style>

